<template>
  <div class="model-container">
    <div class="listName">客户列表</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="nickName">
                    <el-input v-model="seacherParam.searchMessage" size="small" placeholder="客户名/电话/车牌号" maxlength="15"/>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" :disabled="addButton" plain @click="addMember">新增</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据" @selection-change="changeFun">

<!--          <el-table-column align="center" type="selection" width="55"/>-->
          <el-table-column align="center" prop="nmId" label="编号"/>

          <el-table-column align="center" prop="name" label="客户姓名"/>

          <el-table-column align="center" prop="phone" label="联系方式"/>

          <el-table-column align="center" prop="source" label="来源"/>

          <el-table-column align="center" prop="purchaseTime" label="开单次数	"/>

          <el-table-column align="center" prop="lastTime" label="最近进厂时间"/>

          <el-table-column align="center" prop="lastMoney" label="开单金额"/>

          <el-table-column v-if="this.label1" align="center" prop="shopName" label="所属门店"/>

          <el-table-column v-if="this.label2" align="center" prop="enterpriseName" label="所属企业"/>

<!--          <el-table-column align="center" prop="enterpriseName" label="是否是会员"/>-->

          <el-table-column align="center" label="操作" width="230px">
            <template slot-scope="scope">
              <el-button title="客户会员卡详情" :disabled="addButton" type="primary" circle icon="el-icon-date" class="table-icon" @click="openVipPage(scope.row)"/>

              <el-button title="会员办理" :disabled="addButton" type="primary" circle icon="el-icon-arrow-up" class="table-icon" @click="vipEdit(scope.row)"/>

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button title="客户车辆" type="primary" circle icon="el-icon-caret-bottom" class="table-icon" @click="memberCat(scope.row)"/>

              <el-button title="删除" :disabled="addButton" type="warning" circle icon="el-icon-delete" class="table-icon" @click="delById(scope.row)"/>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="客户姓名" prop="name">
            <el-input :disabled="addButton" v-model="dialogBindData.name" size="small" type="text" placeholder="请输入客户姓名" maxlength="15"/>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input :disabled="addButton" v-model="dialogBindData.phone" size="small" type="text" placeholder="请输入联系方式" maxlength="11"/>
          </el-form-item>
          <el-form-item v-show="sourceShow" label="来源" prop="source">
            <el-input :disabled="addButton" v-model="dialogBindData.source" size="small" type="text" placeholder="请输入客户来源" maxlength="15"/>
          </el-form-item>
          <el-form-item label="开单次数" prop="purchaseTime" v-show="false">
            <el-input :disabled="addButton" v-model="dialogBindData.purchaseTime" size="small" type="number" placeholder="请输入客户开单次数" maxlength="11"/>
          </el-form-item>
          <el-form-item label="最近进厂时间" prop="lastTime" v-show="false">
            <el-date-picker
              :disabled="addButton"
              v-model="dialogBindData.lastTime"
              :picker-options="startDatePicker"
              :disable="false"
              size="small"
              align="right"
              type="datetime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择最近进厂时间"/>
          </el-form-item>
          <el-form-item v-show="false" label="开单金额" prop="lastMoney">
            <el-input :disabled="addButton" v-model="dialogBindData.lastMoney" size="small" type="number" placeholder="请输入客户开单金额" maxlength="11"/>
          </el-form-item>
          <el-form-item v-show="createTimeShow" label="创建时间" prop="createTime">
            <el-date-picker
              :disabled="addButton"
              v-model="dialogBindData.createTime"
              :picker-options="startDatePicker"
              :disable="false"
              size="small"
              align="right"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择创建时间"/>
          </el-form-item>
          <el-form-item v-show="updateTimeShow" label="更新时间" prop="createTime">
            <el-date-picker
              v-model="dialogBindData.updateTime"
              :picker-options="startDatePicker"
              :disable="false"
              size="small"
              align="right"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择更新时间"/>
          </el-form-item>
          <el-form-item v-show="creatorShow" label="创建人" prop="creator">
            <el-input :disabled="addButton" v-model="dialogBindData.creator" size="small" type="text" placeholder="请输入客户创建人" maxlength="15"/>
          </el-form-item>
          <el-form-item v-show="nvIdShow" label="会员卡类型" prop="nvId">
            <el-select  :disabled='true' v-model="vipValue" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.cardId"
                :label="item.cardType"
                :value="item.cardId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="shopShow" label="所属门店" prop="shopId">
            <el-select v-model="valuemen" placeholder="请选择">
              <el-option
                v-for="item in Moptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" :disabled="addButton" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>


    <el-dialog
      :title="title"
      :visible.sync="dialogState1"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item  v-show="nvIdShow" label="会员卡类型" prop="nvId">
            <el-select  v-model="vipValue" placeholder="请选择" @change='getValue'>
              <el-option
                v-for="item in options1"
                :key="item.cardId"
                :label="item.cardType"
                :value="item.cardId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="办理金额" prop="creator">
            <el-input :disabled='true' v-model="dialogBindData.price" size="small" type="text" maxlength="15"/>
          </el-form-item>
          <el-form-item label="享受折扣" prop="creator">
            <el-input :disabled='true' v-model="dialogBindData.discount" size="small" type="text" maxlength="15"/>
          </el-form-item>
          <el-form-item label="会员次数/天数" prop="creator">
            <el-input :disabled='true' v-model="dialogBindData.cardEffect" size="small" type="text" maxlength="15"/>
          </el-form-item>
          <el-form-item label="备注" prop="creator">
            <el-input v-model="dialogBindData.remark" size="small" type="text" maxlength="15"/>
          </el-form-item>

          <el-form-item label="开单类型" prop="nvId">
            <el-select  v-model="vipValue1" placeholder="请选择" @change='getValue'>
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="btns-wrapper">
            <el-button size="small" @click="handleClose">取 消</el-button>
            <el-button :loading="buttonState" type="primary" size="small" @click="submmitVip">办 理</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as member from '../../api/member'
import * as userMessage from '../../utils/auth'
import ImageCropper from '@/components/ImageCropper'
import {isvalidNull, validatePhone} from "../../utils/validate";

export default {
  components: {
    ImageCropper
  },
  data() {
    const merchantsPhone = (rule, value, callback) => {
      if (!isvalidNull(value)) {
        callback(new Error('请输入手机号码'))
      } else if (!validatePhone(value)) {
        callback(new Error('请输入正确手机号码'))
      } else {
        callback()
      }
    }

    return {
      valuemen:'',
      shopShow:true,
      Moptions:'',
      label1:true,
      label2:true,
      neid:'',
      shopId:'',
      addButton:false,
      // 页面搜索
      seacherParam: {
        searchMessage: ''
      },
      searchShow: false,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 弹框
      dialogType: 1, // 1--增加  2--编辑  3--查看
      dialogState: false,
      dialogState1: false,
      // 按钮状态
      buttonState: false,
      title:"会员办理",
      // 列表数据
      dataOption: null,
      datavalID: [],
      // 提交内容
      type: '',
      dialogBindData: {
        nmId: null,
        name: '',
        phone: '',
        source: '',
        purchaseTime: '',
        lastTime: '',
        lastMoney: '',
        createTime:'',
        updateTime:'',
        creator:'',
        nvId:'',
        cardId:'',
        price:'',
        type:'',
        discount:'',
        cardEffect:"",
        remark:''
      },
      rules: {
        name: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' },
        ],
        phone: [
          { required: true, validator: merchantsPhone, trigger: 'blur' },
        ],
      },
      sc:'',
      startDatePicker: this.beginDate(),
      // 上传头像
      actionUrl: '',
      imagecropperShow: false,
      imagecropperKey: 0,
      picUrl: '',
      options:'',
      options1:'',
      options2:'',
      vipValue:'',
      vipValue1:'',
      sourceShow:true,
      createTimeShow:false,
      updateTimeShow:true,
      creatorShow:false,
      nvIdShow:true,
      nmId:'',
      cardId:''
    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogType === 1) {
        return '新增客户'
      }
      if (this.dialogType === 2) {
        return '编辑客户'
      } else {
        return '查看'
      }
    }
  },

  beforeMount() {
    this.quanxian()
    //this.getList()
  },

  created() {
    this.initUploadFileurl()
  },
  methods: {
    beginDate() {
      const self = this
      return {
        disabledDate(time) {
          //alert(time.getTime()+"  "+new Date(self.dialogBindData.lastTime).getTime()+"   "+Date.now())
          return time.getTime()>Date.now();
        }
      }
    },
    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
    },
    seachFun() {
      this.pageNo = 1
      this.pageSize = 10
      const url = this.searchData()
      var sys_user=JSON.parse(userMessage.getUserInformation());
      if(!sys_user.neid||sys_user.neid==='1'){
        if(!sys_user.shopId){
          //alert("你是平台")
          this.getList(url)
        }else{
          //alert("你是门店")
          this.getListMe(url)
        }
      }else{
        //你是企业
        this.getListQi(url)
      }

    },
    getList(data) {
      let url = ''
      if (data !== '' && data !== undefined) {
        url = data
      }
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        url: url
      }
      member.getMemberList(param).then(res => {
        console.log(res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data
        // 初始化分页数据
        member.pageMember(param).then(res => {
          console.log(res)
          this.rowCount = res.data.count
          this.pageSize = res.data.size
        })
      })
      member.getVipMessage().then(res => {
        console.log(res)
        //alert(res.request.responseText);
        var arr = res.request.response;
        this.options=res.data;
      })

    },
    getListMe(data) {
      let url = ''
      if (data !== '' && data !== undefined) {
        url = data
      }
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        url: url,
        shopId:this.shopId,
      }
      member.getmemberMen(param).then(res => {
        console.log(res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data
        // 初始化分页数据
        member.pageMember1(param).then(res => {
          console.log(res)
          this.rowCount = res.data.count
          this.pageSize = res.data.size
        })
      })
      member.getVipMessage().then(res => {
        console.log(res)
        //alert(res.request.responseText);
        var arr = res.request.response;
        this.options=res.data;
      })
    },
    getListQi(data) {
      let url = ''
      if (data !== '' && data !== undefined) {
        url = data
      }
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        url: url,
        id:this.neid,
      }
      member.getmemberQi(param).then(res => {
        console.log(res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data
        // 初始化分页数据
        member.pageMember2(param).then(res => {
          console.log(res)
          this.rowCount = res.data.count
          this.pageSize = res.data.size
        })
      })
      member.getVipMessage().then(res => {
        console.log(res)
        //alert(res.request.responseText);
        var arr = res.request.response;
        this.options=res.data;
      })
      member.selectByCId(this.neid).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        console.log(res.data.data)
        this.Moptions = res.data.data
        this.valuemen=res.data.data[0].id;
      })
    },

    quanxian() {
      member.upcountAndMoney().then(order=>{
      var sys_user = JSON.parse(userMessage.getUserInformation());
      console.log(sys_user)
      if (!sys_user.neid || sys_user.neid === '1') {
        if (!sys_user.shopId) {
          //alert("你是平台")
          this.shopShow = false
          if (sys_user.neid !== '1') {
            this.addButton = true;
          }
          this.getList()
        } else {
          //alert("你是门店")
          this.shopShow = false
          this.label1 = false
          this.label2 = false
          this.shopId = sys_user.shopId;
          this.getListMe()
        }
      } else {
        //alert("你是企业")
        this.neid = sys_user.neid
        this.label2 = false
        this.getListQi()
      }
    })
    },
    // 编辑
    edit(data) {
      this.valuemen=data.shopId+''
      var than=this;
      var memberVip = member.selectMemberVipByID(data.nmId)
      this.vipValue='0';
      //console.log(memberVip)
      memberVip.then(function(future) {
        console.log(future)
        if(future.data!==""){
          than.vipValue=future.data.cardId
        }
      }, function(error) {
        // ...
      });
      //this.vipValue=this.sc.data.cardId
      this.nvIdShow=true
      console.log(this.vipValue)
      this.dialogType = 2
      this.sourceShow=true
      this.createTimeShow=false
      this.updateTimeShow=false
      this.creatorShow=false
      this.dialogState = true
      this.dialogBindData.nmId = data.nmId
      if (data.picUrl === null || data.picUrl === '' || data.picUrl === undefined) {
        this.picUrl = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
      } else {
        this.picUrl = data.picUrl
      }
      this.reBindData(data)
    },
    vipEdit(data){
      this.shopId=data.shopId;
      this.nvIdShow=true
      this.dialogState1 = true
      //member.selectMemberVipByID(data.nmId)
      // var than=this
      // memberVip.then(function(future) {
      //   console.log(future)
      //   if(future.data!==""){
      //     than.dialogState1 = false
      //     than.$message({
      //       message: '该用户已经是会员',
      //       type: 'error'
      //     })
      //   }
      // }, function(error) {
      //   // ...
      // });
      member.getVipMessage1(this.shopId).then(res => {
        //alert(res.request.responseText);
        this.options1=res.data;
        //console.log(res)
        this.vipValue=res.data[0].cardId+''
        this.getValue()
        // than.dialogBindData.price=res.data[parseInt(this.vipValue)-1].cardPrice
        // this.dialogBindData.discount=res.data[parseInt(this.vipValue)-1].discount
        this.nmId=data.nmId
      })
      member.getCommodity_type().then(res => {
        //alert(res.request.responseText);
        console.log(res)
        this.options2=res.data.data;
        this.vipValue1=res.data.data[0].id+''
        // than.dialogBindData.price=res.data[parseInt(this.vipValue)-1].cardPrice
        // this.dialogBindData.discount=res.data[parseInt(this.vipValue)-1].discount
        this.nmId=data.nmId
      })
    },
    getValue(){
      console.log(this.options1)
      for(var i=0;i<this.options1.length;i++){
        if(this.options1[i].cardId===this.vipValue){
          this.cardId=this.options1[i].cardId
          this.dialogBindData.price=this.options1[i].cardPrice
          this.dialogBindData.discount=this.options1[i].discount
          if(this.options1[i].type===1){
            this.dialogBindData.cardEffect=this.options1[i].cardEffect+"次"
          }else{
            this.dialogBindData.cardEffect=this.options1[i].cardEffect+"月"
          }
          break
        }
      }
    },
    //增加客户
    addMember(data) {
      this.dialogType = 1
      this.sourceShow=false
      this.createTimeShow=false
      this.updateTimeShow=false
      this.creatorShow=false
      this.nvIdShow=false
      this.dialogState = true
      if (data.picUrl === null || data.picUrl === '' || data.picUrl === undefined) {
        this.picUrl = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
      } else {
        this.picUrl = data.picUrl
      }
    },
    // 提交
    submmitFun() {
      if(!this.vipValue){
        this.vipValue='0';
      }
      const param = {
        name:this.dialogBindData.name,
        phone:this.dialogBindData.phone,
        purchaseTime:this.dialogBindData.purchaseTime,
        lastTime:this.dialogBindData.lastTime,
        lastMoney: this.dialogBindData.lastMoney,
        picUrl: this.picUrl,
        loginLockStatus: 0,
        shopId:this.shopId,
      }
      if(this.dialogType === 1){
        if(this.neid) {
          param.source = '企业创建'
        }else{
          param.source = '门店创建'
        }
        param.creator= JSON.parse(userMessage.getUserInformation()).userName;
        param.nvId='0';
        param.cardId='0';
      }
      if(this.neid){
        param.shopId=this.valuemen
      }

      if (this.dialogType !== 1) {
        param.nmId = this.dialogBindData.nmId
        param.source = this.dialogBindData.source
        param.createTime = this.dialogBindData.createTime
        param.creator = this.dialogBindData.creator
      }
      console.log(param)
      if (this.type === 0) {
        param.type = 0
      } else {
        param.type = 1
      }
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogType === 2) {
            member.editorMemberList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.buttonState = false

              this.quanxian()
              this.handleClose()
            })
          }else if(this.dialogType===1){
            member.addMemberList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '增加成功',
                type: 'success'
              })
              this.buttonState = false
              this.quanxian()
              this.handleClose()
            })
          }
        }
      })
    },
    submmitVip() {
      const param = {
        nmId:this.nmId,
        cardId:this.cardId,
        remark:this.dialogBindData.remark,
        vipTypeId:this.vipValue1
      }
      member.addMemberVipList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
          this.buttonState = false
          return false
        }
        this.$message({
          message: '办理会员成功',
          type: 'success'
        })
        this.buttonState = false
        this.quanxian()
        this.handleClose()
      })
    },
    // 修改积分
    integralFun(type) {
      if (type === 0) {
        this.type = 0
      } else {
        this.type = 1
      }
    },
    // 删除
    delById(data) {
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          nmId:data.nmId,
        }
        this.delList(param)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delList(data) {
      member.delMemberList(data).then(res => {
        if (res.data.code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.quanxian()
        }
      })
    },
    changeFun(data) {
      this.datavalID = data
    },
    // 反显
    reBindData(data) {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },
    // 搜索过滤
    searchData() {
      const arr = []
      for (const key in this.seacherParam) {
        if (this.seacherParam[key] !== '') {
          arr.push('&' + key + '=' + this.seacherParam[key])
        }
      }
      const url = arr.join('')
      return url
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.pageNo = 1
      this.pageSize = 10
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = ''
      }
      this.type = ''
      this.dialogState = false
      this.dialogState1 = false
      this.$refs.dialogBindData.clearValidate()
    },
    // 上传头像
    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.picUrl = resData.data[0].maxImageUrl
    },
    close() {
      this.imagecropperShow = false
    },
    memberCat(data) {
      this.$router.push({
        name: '/v1/membercar',
        params: {
          data: data
        }
      })
    },
    openVipPage(data) {
      this.$router.push({
        name: '/v1/vippage',
        params: {
          data: data
        }
      })
    },
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
  .uploadImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    /*border: 1px dashed #dcdfe6;*/
    img{
      display: block;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .uploadImg_mock{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transition:background-color 0.35s;
      -webkit-transition: background-color 0.35s;
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        font-size: 26px;
        margin-left: -12px;
        margin-top: -16px;
        opacity: 0;
        transition:opacity 0.35s;
        -webkit-transition: opacity 0.35s;
      }
    }
    &:hover .uploadImg_mock{
      background-color: rgba(0,0,0,0.5);
      i{
        opacity: 1;
      }
    }
  }

</style>
